<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="#8B5A2B" inactive-color="#333333">
      <template v-for="(item,index) in tabbarData" :key="index">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <img v-if="currentIndex !== index" :src="getAssetURL(item.image)" alt="" />
            <img v-else :src="getAssetURL(item.imageActive)" alt="" />
          </template>
        </van-tabbar-item>
    </template>
    </van-tabbar>

  </div>
</template>

<script setup>
import tabbarData from "@/assets/data/tabbar.js"
import { getAssetURL } from "@/utils/load_assets.js"
import { ref } from "vue"

const currentIndex = ref(0)


</script>

<style lang="less" scoped>
.tab-bar{
  // --van-tabbar-item-icon-size: 30px !important;
  img{
    height: 30px;
  }
}
</style>